<template>
  <div>
    <myForm :width="50" :model="formData" :ruleForm="ruleForm" ref="myForm">
      <myFormItem label="haha" prop="name" :required="true">
        <myFormInput :value="formData.name" @input="value => formData.name = value"></myFormInput>
      </myFormItem>
      <myFormItem label="hddd" prop="age">
        <myFormInput :value="formData.age" @input="value => formData.age = value"></myFormInput>
      </myFormItem>
    </myForm>
    <button @click="submit">提交</button>
  </div>
</template>

<script>
import myForm from './form.vue'
import myFormItem from './form-item.vue'
import myFormInput from './form-input.vue'
export default {
  components: {
    myForm,
    myFormItem,
    myFormInput
  },
  data () {
    return {
      formData: {
        name: '',
        age: ''
      },
      ruleForm: {
        name: [
          {
            required: true
          }
        ],
        age: [
          {
            required: true
          }
        ]
      }
    }
  },
  methods: {
    submit () {
      this.$refs.myForm.submit(() => {
        console.log('通过')
      }, () => {
        console.log('不通过')
      })
    }
  }
}
</script>
